<!--  -->
<template>
  <div class="padding-20 font-weight-700 whole-box">
    <div class="flex justify-between margin-bottom-30 title-box">
      <span id="dodo" class="font-size-18 font-weight-700">经营状况</span>
      <div class="flex">
        <div v-if="systemType == 'businessBuildingOperate'" class="project-select margin-right-10">
          <el-select v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
            <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
          </el-select>
        </div>
        <div class="project-select" style="width: 85px">
          <el-date-picker class="no-padding-right-box" :clearable="false" size="mini" v-model="searchDate" type="month" placeholder="选择月" @change="getManageState"> </el-date-picker>
        </div>
      </div>
    </div>
    <div class="flex">
      <section class="flex-1">
        <div class="manage-box flex align-centers relative-box margin-bottom-30 cursor-pointer" :class="pageType == 'group' ? 'cursor-pointer' : ''" v-for="(item, index) in list" :key="index" >
          <div>
            <div class="tip-txt font-size-15 font-weight-700">{{ item.typeTopName }}</div>
            <div class="tip-txt font-size-15">{{ item.typeBottomName }}</div>
          </div>
          <div class="flex-column flex-1 progess-box">
            <div class="flex justify-between relative-box">
              <!-- <span v-if="showText && item.completionRate > 0" class="rate-num" :style="[{left:item.completionRate / 100 * progessWidth - (item.completionRate > 99 ? 60 : 30) + 'px'}]">{{item.completionRate}}%</span> -->
              <div>
                <span class="current color-666666 font-size-12">当前:{{ item.actualIncomeAmount | moneyFilterNoUnit }}万元</span>
                <span v-if="item.type == 1 && item.owedPrice > 0" class="arrearage color-red font-size-12 padding-left-10">欠费:{{ item.owedPrice | moneyFilterNoUnit }}万元</span>
              </div>
              <span class="substrac color-666666 font-size-12">偏差:{{ (item.actualIncomeAmount - item.plannedIncomeAmount) | moneyFilterNoUnit }}万元</span>
            </div>
            <el-progress type="line" class="flex-1" :show-text="true" :percentage="item.completionRateTxt || 0" color="#3384FE" :text-inside="true" :stroke-width="16"></el-progress>
            <span class="plan color-666666 font-size-12">计划:{{ item.plannedIncomeAmount | moneyFilterNoUnit }}万元</span>
          </div>
        </div>
      </section>
    </div>

    <table-manage-state ref="dealogManage"></table-manage-state>
  </div>
</template>
<script>
  import { apiManageState } from '@a/about';
  import { accDiv, accAdd, toFixedTwo, formMonthDate } from '@/common/js/utils.js';
  import tableManageState from './tableManageState.vue';
  import $ from 'jquery';
  import { projectList } from '@/api';

  export default {
    props: {
      //group是集团视图 operation是运营视图
      pageType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        searchDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 31,
        // searchDate: new Date('2022-12-30').getTime(), //固定时间
        projectKey: localStorage.getItem('projectKey'),
        list: [],
        operationIncome: 0,
        operationPayment: 0,
        showText: true,
        progessWidth: 0,
        projectOptions: [],
        systemType: localStorage.getItem('systemType'),
      };
    },

    methods: {
      async getManageState() {
        let owedPriceProportionProgess = 0; //欠费的比例 + 收入的比例 为了展示
        let owedPriceProportionVal = 0; //欠费的比例
        let res = await apiManageState({
          type: this.pageType, //集团视图,group 运营视图,operation
          projectKey: this.pageType == 'group' ? null : this.projectKey,
          planYear: new Date(this.searchDate).getFullYear(),
          planMonth: new Date(this.searchDate).getMonth() + 1,
        });
        let maxValArr = [];
        this.showText = res.havePlan;
        this.operationIncome = res.operationIncome || 0;
        this.operationPayment = res.operationPayment || 0;
        res.list = res.list.filter(item => item.type != 2);
        res.list.forEach(item => {
          if (item.type == 1) {
            item.typeTopName = '经营收入';
            item.typeBottomName = '现金流';
            owedPriceProportionProgess = accAdd(Math.abs(item.owedPriceProportion) * 100, Number(item.completionRate) * 100);
            owedPriceProportionVal = toFixedTwo(Math.abs(item.owedPriceProportion) * 100);
            maxValArr.push(accAdd(Number(item.actualIncomeAmount), Math.abs(item.owedPrice)));
          } else if (item.type == 2) {
            item.typeTopName = '经营收入';
            item.typeBottomName = '权责';
            maxValArr.push(item.actualIncomeAmount);
          } else if (item.type == 3) {
            item.typeTopName = '经营支出';
            item.typeBottomName = '现金流';
            maxValArr.push(item.actualIncomeAmount);
          } else if (item.type == 4) {
            item.typeTopName = '资本性支出';
            item.typeBottomName = '现金流';
            maxValArr.push(item.actualIncomeAmount);
          }
          item.completionRate = toFixedTwo(item.completionRate * 100);
          item.completionRateTxt = item.completionRate > 100 ? 100 : item.completionRate;
        });
        /*---
          如果没有计划(res.havePlan==false)时
          分母：这4个数据abcd的最大值 经营收入：(现金流 type=1) a 是当前的金额+欠费的绝对值， 其他：当前的金额 b,c,d
          这4个条的 百分比 就是每个的当前钱（item.actualIncomeAmount）/ 分母
        ----*/
        let maxVal = Math.max.apply(null, maxValArr);
        if (!res.havePlan) {
          res.list.forEach(item => {
            item.completionRate = toFixedTwo((item.actualIncomeAmount / maxVal) * 100);
            if (item.type == 1) {
              item.owedPriceProportion = toFixedTwo((Math.abs(item.owedPrice) / maxVal) * 100);
              owedPriceProportionProgess = accAdd(Number(item.owedPriceProportion), Number(item.completionRate));
              owedPriceProportionVal = item.owedPriceProportion;
            }
          });
        }
        this.list = res.list || [];
        if (owedPriceProportionVal > 0) {
          await this.$nextTick();
          this.appendArrearageProgress(owedPriceProportionProgess, owedPriceProportionVal, res.havePlan);
        }
        this.progessWidth = $('.progess-box').width();
        console.log($('.progess-box').width());
      },

      //项目列表
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows;
        this.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        if (!this.projectKey) return
        this.getManageState();
      },

      changeProject() {
        this.getManageState();
      },

      //欠费的进度条
      appendArrearageProgress(progess, progessVal, havePlan) {
        let txt = ''; // havePlan ? progessVal + '%' : '';
        if ($('.arrearage-progress').length > 0) {
          $('.arrearage-progress').remove();
        }
        let redDiv = `<div class="t-right arrearage-progress" style="width: ${progess}%; height: 16px; background-color: #FF0000;">
        <span class="el-progress-bar__innerText">${txt}</span>
        </div>`;
        let firstProgress = $('.manage-box').find('.el-progress-bar__outer')[0];
        $(firstProgress).append(redDiv);
      },

      //弹窗内容
      showDialog(type, dialogTitle, list) {
        this.$refs.dealogManage.init(type, dialogTitle, list);
      },
    },

    components: { tableManageState },

    mounted() {
      //businessBuildingOperate 商写运营要独立选择项目 初始为第一个项目
      if (this.systemType == 'businessBuildingOperate') {
        this.getProjectList();
      } else {
        this.projectKey && this.getManageState();
      }
    },
  };
</script>
<style scoped lang="scss">
  .full-box {
    width: 100%;
  }
  ::v-deep .el-progress-bar__outer {
    border-radius: 0;
  }
  ::v-deep .el-progress-bar__inner {
    border-radius: 0;
  }
  .relative-box {
    position: relative;
  }
  .absolute-box {
    position: absolute;
  }
  .arrearage {
    top: -10px;
    left: 200px;
  }
  .current {
    top: -10px;
    left: 84px;
  }
  .substrac {
    top: -10px;
    right: 0;
  }
  .plan {
    top: 35px;
    right: 0;
  }
  .tip-txt {
    width: 85px;
  }
  .title-box {
    height: 28px;
  }
  .whole-box {
    height: 100%;
    background: #fff;
    overflow: hidden;
  }
  .no-padding-right-box {
    ::v-deep .el-input__inner {
      padding-right: 0;
    }
  }
  .split-line {
    width: 1px;
    height: 40px;
    background: #f1f1f1;
  }

  .rate-num {
    position: absolute;
    top: 19px;
    color: #fff;
    font-size: 12px;
    z-index: 99;
  }

  .left-box {
    border-right: solid 1px #f1f1f1;
    padding: 50px 50px 50px 30px;
    margin-right: 50px;
    margin-bottom: 40px;
  }
</style>
